<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/allBasic.css">
    <link rel="stylesheet" href="css/sitePage.css">
    <link href="css/vipRelation.css" rel="stylesheet">
    <title>会员图谱</title>
</head>
<body>
<div class="page_box">
    <div class="page_box_head title_color3">
        <span class="page_title_sign"><i class="iconfont">&#xe6c1;</i></span>
        <h3 class="page_title">会员图谱</h3>
    </div>
    <div class="search_area center">
        <span class="hint">搜索用户:</span>
        <input type="text" class="f_element_h write"  placeholder="输入用户名搜索">
        <div class="btn_box">
            <button class="f_element_h theme_bg" type="submit">搜索用户</button>
            <a href=""> <button class="f_element_h theme_bg" type="button">返回上一级</button>
            </a>
        </div>
    </div>
    <div class="color_hint">
        普通会员：
        等级1:<span class="rank1 item"></span>
        等级2:<span class="rank2 item"></span>
        等级3:<span class="rank3 item"></span>
        等级4:<span class="rank4 item"></span>
        等级5:<span class="theme_bg item"></span>
        未激活:<span class="not_active item"></span>
    </div>
    <div class="x_scroll">
     <!--树图开始-->
        <div class="tree_outer">
            <!--顶层节点-->
            <div class="item  after_line center">
                <!--放在 item 下面-->
                <!--块填充色-->
                <input type="text" value="#552296" name="tree_m_bg" class="hide_input">
                <!--块字体色-->
                <input type="text" value="#000" name="tree_m_color" class="hide_input">
                <!--块边框-->
                <input type="text" value="1px solid #000" name="tree_m_border" class="hide_input">
                <!--小块填充色-->
                <input type="text" value="red" name="tree_scd_bg" class="hide_input">
                <!--小块字体色-->
                <input type="text" value="#000" name="tree_scd_color" class="hide_input">
                <p>
                    <a href="" class="block">
                        002
                    </a>
                </p>
                <p>(等级1)</p>
                <p class="notice">张是总20</p>
                <p class="notice">李四余50</p>
            </div>
            <!--二级节点-->
            <ul class="tree_scd">
                <!--节点横向辅助线-->
                <li class="line"></li>
                <!--.out节点,.item节点内容，.tree_scd为.item下属节点（以此类推）-->
                <!--.before_line向上辅助线，.after_line向下辅助线，.item文本内容，.主题色-->
                <li class="out ">
                    <div class="item_box before_line after_line ">
                       <div class="item ">
                           <!--块填充色-->
                           <input type="text" value="#fff" name="tree_m_bg" class="hide_input">
                           <!--块字体色-->
                           <input type="text" value="#000" name="tree_m_color" class="hide_input">
                           <!--块边框-->
                           <input type="text" value="" name="tree_m_border" class="hide_input">
                           <!--小块填充色-->
                           <input type="text" value="" name="tree_scd_bg" class="hide_input">
                           <!--小块字体色-->
                           <input type="text" value="#000" name="tree_scd_color" class="hide_input">
                        <p>
                            <a href="" class="block">
                                002
                            </a>
                        </p>
                        <p>(等级1)</p>
                        <p class="notice">张是总20</p>
                        <p class="notice">李四余50</p>
                    </div>
                    </div>
                    <ul class="tree_scd">
                        <li class="line"></li>
                        <li class="out ">
                            <div class="item_box before_line">
                                <div class="item rank3">
                                    <p>
                                        <a href="" class="block">
                                            002
                                        </a>
                                    </p>
                                    <p>(等级1)</p>
                                    <p class="notice">张是总20</p>
                                    <p class="notice">李四余50</p>
                                </div>
                            </div>
                        </li>
                        <li class="out ">
                            <div class="item_box before_line">
                                <div class="item ">
                                    <p>
                                        <a href="" class="block">
                                            002
                                        </a>
                                    </p>
                                    <p>(等级1)</p>
                                    <p class="notice">张是总20</p>
                                    <p class="notice">李四余50</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="out ">
                    <div class="item_box before_line after_line ">
                        <div class="item ">
                        <p>
                            <a href="" class="block">
                                002
                            </a>
                        </p>
                        <p>(等级1)</p>
                        <p class="notice">张是总20</p>
                        <p class="notice">李四余50</p>
                    </div>
                   </div>
                    <ul class="tree_scd">
                        <li class="line"></li>
                        <li class="out ">
                            <div class="item_box before_line">
                                <div class="item ">
                                    <p>
                                        <a href="" class="block">
                                            002
                                        </a>
                                    </p>
                                    <p>(等级1)</p>
                                    <p class="notice">张是总20</p>
                                    <p class="notice">李四余50</p>
                                </div>
                            </div>
                        </li>
                        <li class="out ">
                            <div class="item_box before_line">
                                <div class="item ">
                                    <p>
                                        <a href="" class="block">
                                            002
                                        </a>
                                    </p>
                                    <p>(等级1)</p>
                                    <p class="notice">张是总20</p>
                                    <p class="notice">李四余50</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    <!--树图结束-->
    </div>
</div>
</body>
<!--<script src="js/vipRelation.js"></script>-->
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $().ready(function(){
        treeLine(".tree_scd"); /*树图辅助线绘画（节点多，计算大，会卡）*/
        treeNodeColor(".tree_outer .item",".notice");
    });
    function treeLine(obj){
        var obj_len=$(obj).length;
        for(var i=0;i<obj_len;i++) {
            var obj1=$(obj).eq(i).children(".out:first"),  /*获取节最左边节点*/
                obj2=$(obj).eq(i).children(".out:last"),  /*获取节最右边节点*/
                left_x=obj1.offset().left,                   /*计算节最左边节点到文档的距离*/
                left_w=obj1.width()/2,                       /*计算节最左边节点宽度一半*/
                right_x=obj2.offset().left,                  /*计算节最右边节点到文档的距离*/
                right_w=obj2.width()/2,                       /*计算节最右边节点宽度一半*/
                line_w= (right_x+right_w)-(left_x+left_w);   /*计算节最左边到最右边的距离*/
            $(obj).eq(i).children(".line").css({"width":line_w,"left":left_w});     /*设置横向辅助线的宽度*/
        }
    }
    function treeNodeColor(obj1,obj2){
        $.each($(obj1),function(){
            var mbg=$(this).find("[name='tree_m_bg']").val(),
                mcolor=$(this).find("[name='tree_m_color']").val(),
                mborder=$(this).find("[name='tree_m_border']").val(),
                scdbg=$(this).find("[name='tree_scd_bg']").val(),
                scdcolor=$(this).find("[name='tree_scd_color']").val();
            if(mbg){
                $(this).css({"background-color":mbg});
            }
            if(mcolor){
                $(this).css({"color":mcolor});
            }
            if(mborder){
                $(this).css({"border":mborder});
            }
            if(scdbg){
                $(this).find(obj2).css({"background-color":scdbg});
            }
            if(scdcolor){
                $(this).find(obj2).css({"color":scdcolor});
            }
        })

    }
</script>
</html>